<template>
	<view class="">
		<view class="list" style="border-bottom: 1rpx solid #eee;">
			<view class="list__title">标题</view>
			<view class="list__input">
				<input type="text" v-model="data.label" placeholder="请输入标题" placeholder-style="font-size: 35rpx;">
			</view>
		</view>
		<view class="list">
			<view class="list__title">提示文字</view>
			<view class="list__input">
				<input type="text" v-model="data.placeholder" placeholder="请输入提示文字">
			</view>
		</view>
		
		<view class="option">
			<view class="option__left">必填</view>
			<view class="option__right">
				<u-switch v-model="data.required"></u-switch>
			</view>
		</view>
		
		<view class="del" @click="remove">删除</view>
		
		<view class="confirm">
			<u-button type="primary" color="#2979ff" text="完成" @click="confirm"></u-button>
		</view>
	</view>
</template>

<script>
	import {sendBackFunction} from '@/common/custom_util.js';
	
	export default {
		data() {
			return {
				data: {
					label: '',
					placeholder: '请输入',
					required: false
				}
			}
		},
		onLoad(options) {
			options.data ? this.data = JSON.parse(options.data) : '';
		},
		methods: {
			confirm() {
				sendBackFunction('getTextarea',this.data)
			},
			remove() {
				let that = this;
				uni.showModal({
					title: '是否删除?',
					content: '',
					success(res) {
						if(res.confirm) {
							sendBackFunction('remove',that.data)
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 20rpx;
		background-color: #fff;
		
		&__title {
			color: #aaa;
			font-size: 27rpx;
		}
		
		&__input {
			margin: 10rpx 0;
		}
	}
	
	.option {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		
		&__left {
			font-size: 35rpx;
		}
	}
	
	.del {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
		color: #ff7875;
	}
	
	.confirm {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 9;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 -3rpx 20rpx 1rpx rgba(0, 0, 0, .1);
	}
	
</style>
